<template>
  <div style="min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px;">
    
    <div style="display: flex; width: 100%; max-width: 1200px; height: 600px; background: white; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);">
      
      <!-- 左侧区域 - 测试 -->
      <div style="flex: 1; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); display: flex; align-items: center; justify-content: center; color: white; font-size: 32px; font-weight: bold;">
        左侧轮播图区域
        <br>
        <small style="font-size: 16px;">如果您能看到这个，说明布局正常</small>
      </div>
      
      <!-- 右侧登录表单 -->
      <div style="flex: 0 0 480px; background: white; padding: 40px; display: flex; align-items: center; justify-content: center;">
        <div style="text-align: center;">
          <h1>登录表单</h1>
          <p>这是右侧</p>
          <button style="padding: 12px 30px; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; margin-top: 20px;" @click="$router.push('/login')">
            返回实际登录页
          </button>
        </div>
      </div>
      
    </div>
    
  </div>
</template>

<script>
export default {
  name: 'LoginTest'
}
</script>



